<template>
<!-- 	<CustomNavBar :showBack="true">
		<template #title>
			<view class="heardTitle">
				预约看房
			</view>
		</template>
	</CustomNavBar>
	<view class="pages" :style="{ paddingTop: `${data.navBarHeight}px` }"> -->
	<view class="pages"> 
		<view class="tops"></view>
		<view class="items">
			<view class="list">
				<itemView :listData='listData'></itemView>
			</view>
		</view>
		<view class="contens">
			<view class="itemsView" @click="data.showModel = true">
				<view class="lefts required">
					预约时间
				</view>
				<view class="contensVie" :style="{'color':simpleTime?'#000':''}">
					{{simpleTime||'请选择'}}
				</view>
				<view class="rigths">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit" class="tigrh"></image>
				</view>
			</view>
			<view class="itemsView">
				<view class="lefts required">
					您的称呼
				</view>
				<view class="contensVie">
					<input type="text" v-model="form.nickName" placeholder="请输入" value=""
						placeholder-style="color: #ccc;" class="full_flex" />
				</view>
				<view class="rigths"></view>
			</view>
			<view class="itemsView">
				<view class="lefts norequired">
					手机号码
				</view>
				<view class="contensVie">
					<span style="color: #000;">{{form.contactPhone}}</span>
				</view>
				<view class="rigths"></view>
			</view>
			<view class="itemsView,itemsView1">
				<view class="lefts norequired">
					备注
				</view>

			</view>
			<textarea placeholder="请输入" :disabled="data.showModel" v-model="form.remark" placeholder-style="color:#ccc;" class="textarea" />
			<view class="bottns" @click="handleSubmit">
				提交预约
			</view>
		</view>

	</view>
	<view class="poops" v-if="data.showModel" >
		<view class="tops" style="width: 100%;height: 584rpx;" ></view>
		<view class="domsw">
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="heard dis">
				<view class="titlesc">
					选择时间
				</view>
				<image src="/pagesA/static/cha.png" mode="aspectFit" class="chas" @click="data.showModel=false"></image>
			</view>
			<view class="topVies">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view :class="['scroll-view-item_H',index == selectTime.dateIndex?'selectItem':'']"
						v-for="(i,index) in dataListData" :key="index" @click="handleSelect(i,index,'date')">
						<view :class="['topTitle','dis',index == selectTime.dateIndex?'daySelect':'']">
							{{index == 0 ?'今天': i.weekday}}
						</view>
						<view :class="['topTitle','dis',index == selectTime.dateIndex?'daySelect':'']">
							{{i.time}}
						</view>
					</view>

				</scroll-view>
			</view>
			<view class="contensVies">
				<view :class="['itemsIm', 'dis',index == selectTime.timeIndex?'daySelect':'']"
					v-for="(item,index) in timeListData" :key="index" @click="handleSelect(item,index,'time')"
					:style="{'opacity':item.state == 1?'0.3':''}">
					{{item.valueName}}
				</view>
			</view>
			<view class="bottns1 dis" @click="handleConfirm">
				确定
			</view>
			<view style="width: 100%;height: 56rpx;">

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		timeList,
		dateList
	} from './js/date.js';
	import {
		simpleDetail,
		appointmentAdd
	} from './js/api.js'
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import itemView from '@/pagesA/search/components/items.vue'
	import http from '@/uitls/http.js';
	const data = reactive({
		navBarHeight: 0,
		showModel: false
	})
	const app = getApp()
	const dataListData = ref([])
	const timeListData = ref([])
	const simpleTime = computed(() => {
		if (selectTime.date && selectTime.time) return `${selectTime.date} ${selectTime.time}`
		return ''
	})
	const form = reactive({
		appointTime: '',
		nickName: '',
		remark: '',
		contactPhone: '',
		houseId: 1,
	})
	onMounted(() => {
		form.contactPhone  =  app.globalData.phoneNumber
		data.navBarHeight = app.globalData.navBarHeight + app.globalData.statusBarHeight
		
		dataListData.value = dateList()
		timeListData.value = timeList()
		selectTime.date = dataListData.value[0].date
		checkSelect()
		console.log('timeListData.value', timeListData.value)
	})
	onLoad((options)=>{
		if(options.id){
			form.houseId = options.id
			getSimpleDetail(options.id)
		}
		
	})
	const selectTime = reactive({
		dateIndex: 0,
		timeIndex: -1,
		date: '',
		time: '',
	})
	const listData = ref({})

	const getSimpleDetail = async (id) => {
		let res = await simpleDetail(id)
		if(res.data.code == 0){
			listData.value = res.data.data
		}
		// let {
		// 	name,
		// 	area,
		// 	facingName,
		// 	floorNum,
		// 	totalFloorNum,
		// 	address,
		// 	price,
		// 	tagNameList,
		// 	imageUrl,
		// 	imageType,
		// } = res.data.data
		// listData.value = {
		// 	name,
		// 	area,
		// 	facingName,
		// 	floorNum,
		// 	totalFloorNum,
		// 	address,
		// 	price,
		// 	tagNameList,
		// 	imageUrl,
		// 	imageType,
		// 	id
		// }
	}
	//预约时间选择事件，type 为date、time
	const handleSelect = (item, index, type) => {
		if (type == 'date') {
			//日期改变清除时间
			if (selectTime.dateIndex != index) {
				selectTime.timeIndex = -1
				selectTime.time = ''
			}
			selectTime.dateIndex = index
			selectTime.date = item.date
			checkSelect()
		} else {
			if (item.state == 1) return false
			selectTime.timeIndex = index
			selectTime.time = item.valueName
		}
		console.log(selectTime)
	}
	//预约时间确定事件
	const handleConfirm = () => {
		//关闭弹框
		data.showModel = false
	}
	//检查当前时间是否可选择
	const checkSelect = () => {

		// '2025-6-11 12:00'
		let newDate = new Date()
		let newTimestamp = newDate.getTime();
		let list = timeListData.value
		if (selectTime.dateIndex == 0) {
			let dateString = dataListData.value[0].date
			list.map(item => {
				// console.log('sfdjgjdg-------454656-')
				let time = `${dateString} ${item.valueName}`;
				// 首先将字符串转换为Date对象
				let date = new Date(time);
				// 然后将Date对象转换为时间戳（毫秒）
				let timestamp = date.getTime();
				if (timestamp > newTimestamp) {
					console.log('会进来吗？====')
					item.state = 0
				} else {
					item.state = 1
				}

			})
		} else {
			list.map(item => item.state = 0)
		}
	}
	const handleSubmit = async() => {
		if (!selectTime.time) {
			http.isMssage('请选择预约时间')
			return false
		}
		console.log(form)
		let appointTime = `${selectTime.date}${selectTime.time}:00`
		appointTime = appointTime.split("/").join("-")
		console.log('appointTime',appointTime)
		let paramsData = {
			...form,
			appointTime
		}
		//
		console.log(paramsData)
		// return false
		let res = await appointmentAdd(paramsData)
		console.log('paramsData', paramsData,res)
			
		if(res.data.code == 0){
			http.isMssage('预约成功')
			setTimeout(()=>{
				uni.navigateBack()
			},2000)
		}else{
			http.isMssage(res.data.message)
		}
	}

</script>

<style lang="less" scoped>
	.heardTitle {
		ont-family: PingFangSC-Semibold;
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		font-weight: 600;
	}

	.pages {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
		// overflow: hidden;

		.tops {
			width: 100%;
			height: 16rpx;
		}

		.items {
			width: 100%;
			height: 264rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;

			.list {
				width: 690rpx;
				height: 204rpx;
				margin: auto;
			}
		}

		.contens {
			width: 100%;
			height: calc(100vh - 296rpx);
			background-color: #fff;
			margin-top: 16rpx;

			.itemsView {
				width: 690rpx;
				height: 90rpx;
				margin: auto;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lefts {
					width: 152rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
					display: flex;
					align-items: center;
					// justify-content: center;
				}

				.contensVie {
					width: calc(100% - 202rpx);
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #CCCCCC;
					font-weight: 400;

					.full_flex {
						color: #000;
					}
				}

				.rigths {
					width: 40rpx;
					display: flex;
					align-items: center;

					.tigrh {
						width: 40rpx;
						height: 30rpx;
					}
				}
			}

			.itemsView1 {
				border: none;
			}

			.textarea {
				width: 658rpx;
				height: 200rpx;
				margin: auto;
				background: #F8F8F8;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				padding: 16rpx;
			}

			.bottns {
				width: 626rpx;
				height: 90rpx;
				background: linear-gradient(to right, #F8D648, #F1B13F);
				border-radius: 50rpx;
				margin: auto;
				margin-top: 50rpx;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


	}

	.poops {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.50);
		z-index: 9999999999 !important;

		.domsw {
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0rpx;
			width: 100%;
			min-height: 800rpx;
			position: fixed;
			bottom: 0;

			.heard {
				width: 100%;
				height: 42rpx;
				position: relative;

				.titlesc {
					font-family: PingFangSC-Regular;
					font-size: 30rpx;
					color: #333333;
					text-align: center;
					font-weight: 400;
				}

				.chas {
					position: absolute;
					right: 30rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}

			.topVies {
				width: 100%;
				height: 100rpx;
				margin-top: 32rpx;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.scroll-view-item_H {
						width: 120rpx;
						height: 100rpx;
						background: #F3F5F9;
						border-radius: 8rpx;
						margin-left: 16rpx;
						display: inline-block;

						.topTitle {
							width: 100%;
							height: 50%;
							font-family: PingFangSC-Regular;
							font-size: 26rpx;
							color: #333333;
							text-align: center;
							line-height: 30rpx;
							font-weight: 400;
						}

						.daySelect {
							color: #EE7930;
						}
					}

					.selectItem {
						background: #FFF1E8;
						border: 1rpx solid rgba(238, 121, 48, 1);
						border-radius: 8rpx;
					}
				}
			}

			.contensVies {
				margin-top: 40rpx;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 30rpx;
				padding: 0 30rpx 20rpx 30rpx;

				.itemsIm {
					// width: 156rpx;
					height: 60rpx;
					background: #F3F5F9;
					border-radius: 8rpx;
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #333333;
					text-align: center;
					line-height: 30rpx;
					font-weight: 400;
					// margin-left: 30rpx;
					// margin-bottom: 20rpx;
					border: 1rpx solid #F3F5F9;
				}

				.daySelect {
					color: #EE7930;
					background: #FFF1E8;
					border: 1rpx solid rgba(238, 121, 48, 1);

				}
			}

			.bottns1 {
				width: 626rpx;
				height: 90rpx;
				margin: auto;
				margin-top: 30rpx;
				background: linear-gradient(to right, #F1B13F 0%, #F8D648 100%);
				border-radius: 50rpx;
				font-family: PingFangSC-Regular;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
				font-weight: 400;
			}
		}

	}
</style>